<!DOCTYPE html>
<html>

<head>
  <title>{{ authTexts.login.login }}</title>
  <link href="{{ cssUrl }}" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="{{ faviconUrl }}"></link>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      background-image: url("{{ backgroundImagePath }}");
      background-repeat: no-repeat;
      background-color: {{ backgroundFallbackColor }};
      background-size: cover;
    }
    .button-primary {
        background-color: {{ themeColor }};
    }
    svg {
      height: 100%;
      width: 100%;
    }
    @media screen and (max-width: 1200px) {
      .hidden-xs{
          display: none;
      }
    }
  </style>
</head>

<body style="font-family:Roboto">
    <div class="fixed top-6 left-24">
      {% if logoLink == "" %}
      <img class="w-40" src="{{ logoUrl }}" alt="logo">
      {% else %}
      <a href="{{ logoLink }}" target="_blank">
        <img class="w-40" src="{{ logoUrl }}" alt="logo">
      </a>
      {% endif %}
    </div>
    <div class="w-full h-screen flex">
      <div class="w-1/2 h-screen ml-20 flex items-center justify-center">
        <div class="w-80 max-w-md min-w-max bg-white rounded-lg py-12">
          <form method="post" action="">
            <div class="mb-16 text-2xl font-semibold text-center">{{ authTexts.login.accountPasswordLogin }}</div>
            <div class="px-14 flex flex-col items-center">
              <div class="w-80 mb-10">
                <input type='text' name="username" placeholder="{{ authTexts.login.username }}" required
                    class="px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-none" />
              </div>
              <div class="w-80 mb-10">
                <div class="relative flex items-center">
                    <input id="password" name="password" placeholder="{{ authTexts.login.password }}" type="password" required
                        class="px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-none" />
                    <div id="eye-elem" class="absolute w-5 h-5 right-3 bg-contain"></div>
                </div>
              </div>
              {% if enableTotp %}
                <div class="w-80 mb-10">
                  <div class="flex items-center">
                    <input name="otpCode" placeholder="{{ authTexts.login.otpVCode }}" type="text" required
                      class="px-8 w-full py-2 border rounded text-gray-700 focus:outline-none"/>
                  </div>
                </div>
              {% endif %}
              {% if enableCaptcha %}
                <div class="w-80 mb-10">
                  <div class="flex items-center">
                    <input name="code" placeholder="{{ authTexts.login.inputVCode }}" type="text" required
                        class=" px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-none" />
                    <div id="captcha" onclick="refreshCaptcha()" class="cursor-pointer">{{ code }}</div>
                    <script>
                      function refreshCaptcha(){
                        const captchaDiv = document.getElementById("captcha");
                        fetch("{{ refreshCaptchaPath }}", {
                          method: "POST",
                          headers: { "Content-Type": "application/json" },
                          body: JSON.stringify({
                            token: "{{ token }}",
                          }),}
                          ).then( async function (response) {
                            captchaDiv.innerHTML = await response.text();
                          }).catch(() => {
                            captchaDiv.textContent = "{{ authTexts.login.refreshError }}"
                          });
                      }
                    </script>
                  </div>
                </div>

                {% if verifyCaptchaFail %}
                  <p class="my-4 text-center text-red-600">{{ authTexts.login.invalidVCode }}</p>
                {% endif %}

              {% else %}
                <input type="hidden" name="code" value="" />
              {% endif %}

              <input type="hidden" name="token" value="{{ token }}" />
              <input type="hidden" name="callbackUrl" value="{{ callbackUrl | escape }}" />

              {% if err %}
                <p class="my-4 text-center text-red-600">{{ authTexts.login.invalidInput }}</p>
              {% endif %}
              {% if verifyOtpFail %}
                <p class="my-4 text-center text-red-600">{{ authTexts.login.invalidOtp }}</p>
              {% endif %}
              <button type="submit" class="w-80 py-2 mb-14 rounded button-primary text-gray-100 focus:outline-none">
                  {{ authTexts.login.login }}
              </button>
            </div>
          </form>
          {% if showBindOtpButton %}
            <div class="px-12 mt-4">
              <form action="{{ otpBasePath }}/bind" method="get">
                <button type="submit" name="action" value="bindOtp" class="px text-gray-400">
                  {{ authTexts.login.bindOtp }}
                </button>
                <input type="hidden" name="callbackUrl" value="{{ callbackUrl | escape }}" />
              </form>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="w-1/2 h-screen pl-48 flex justify-center flex-col hidden-xs">
          <div class="text-4xl font-semibold mb-12"  style="color: {{ sloganColor }}">{{ sloganTitle }}</div>
          {% for sloganText in sloganTextArr %}
            <div class="text-2xl mb-8"  style="color: {{ sloganColor }}">{{ sloganText }}</div>
          {% endfor %}
      </div>
    </div>
    <p class="absolute bottom-0 w-full pl-24 my-4 text-white text-xs" style="color: {{ footerTextColor }}">
      Powered by <a href="https://github.com/PKUHPC/OpenSCOW" target="_blank">OpenSCOW</a>
    </p>
    <script>
      // 图片预加载
      const eyeImg = new Image();
      eyeImg.src = "{{ eyeImagePath }}";
      const eyeCloseImg = new Image();
      eyeCloseImg.src = "{{ eyeCloseImagePath }}";

      const passwordInput = document.getElementById('password');
      const eyeElem = document.getElementById('eye-elem');
      eyeElem.style.backgroundImage =  "url('" + eyeCloseImg.src + "')"
      eyeElem.style.cursor = "pointer"
      eyeElem.addEventListener("click", function() {
        if (passwordInput.type === "password") {
          passwordInput.setAttribute("type", "text");
          eyeElem.style.backgroundImage =  "url('" + eyeImg.src + "')"
        } else {
          passwordInput.setAttribute("type", "password");
          eyeElem.style.backgroundImage =  "url('" + eyeCloseImg.src + "')"
        }
      })
    </script>
</body>
</html>
